<template>
	<view class="detail">
		<!-- <image class="img1" src="https://file.roumeiji.com/img/15.png" mode="widthFix"></image> -->
		<!-- <view style="word-wrap: break-word;">
	{{model.file}}
</view> -->
		<view @click="chooseAvatar" class="photo">
			<image class="img" :src="model.file"></image>
			<view class="wz">
				更新头像
			</view>
		</view>

		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :border-bottom="false" label-width="120" :label-position="labelPosition" label="昵称"
				prop="nickName">
				<u-input :border="border" placeholder="请输入昵称" v-model="model.nickName" type="text"></u-input>
			</u-form-item>
			<u-form-item :border-bottom="false" label-width="120" :label-position="labelPosition" label="真实姓名"
				prop="realName">
				<u-input :border="border" placeholder="请输入真实姓名" v-model="model.realname" type="text"></u-input>
			</u-form-item>
			<!-- <u-form-item :border-bottom="false" :label-position="labelPosition" label="手机号码" prop="phone"
				label-width="150">
				<u-input disabled :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
			</u-form-item> -->

			<!-- <u-form-item :border-bottom="false" :label-position="labelPosition" label="性别" prop="sex">
				<u-input disabled :border="border" type="select" :select-open="actionSheetShow" v-model="model.sex"
					placeholder="请选择您的性别"></u-input>

			</u-form-item> -->



			<!--

			<u-form-item :border-bottom="false" label-width="120" :label-position="labelPosition" label="身份证号"
				prop="idcard">
				<u-input :border="border" placeholder="请输入身份证号" v-model="model.idcard" type="text"></u-input>
			</u-form-item>

			<u-form-item :border-bottom="false" :label-position="labelPosition" label="所在城市" prop="region"
				label-width="150">
				<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region"
					placeholder="请选择请选择您的省市区" @click="pickerShow = true"></u-input>
			</u-form-item> -->

		</u-form>
		<!-- <u-button class="sub" @click="submit">提交</u-button> -->
		<view class="sub" @click="submit">提交</view>
		<!-- <u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
 -->


	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				avatarBase64: '',
				model: {
					file1: '',
					file: 'http://tou-file.oss-cn-hangzhou.aliyuncs.com/icons/28.png',
					nickName: '',
					realname: '',
					// sex: '',
					// phone: '',
					// idcard: '',
					// region: '',
					// city: '',
					// province: '',
					// area: ''

				},

				rules: {
					
				},
				border: true,

				selectStatus: 'close',

				
				actionSheetShow: false,
				pickerShow: false,
				selectShow: false,

				labelPosition: 'top',

				errorType: ['message'],
			};
		},
		onLoad() {
	this.getuserinfo()
			// let infos = uni.getStorageSync('info')

			// console.log(infos, '^^^^^^^');

			// this.model.nickName = this.vuex_nickname
			// this.model.realName = infos?.fullname
			// this.model.idcard = infos?.userprofile?.idcard

			// this.model.city = infos?.userprofile?.city
			// this.model.province = infos?.userprofile?.province
			// this.model.area = infos?.userprofile?.area

			// this.model.region = (this.model.province || '') + (this.model.city || '') + (this.model.area || '')

			// this.model.phone = this.vuex_phone
			// this.model.file = this.vuex_headimg
			// this.model.file1 = this.vuex_headimg
			// this.model.sex = this.vuex_sex == 1 ? '男' : '女'
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},


		methods: {
			getuserinfo() {
				// this.sendDate =false;
				this.$u.api
					.userinfo()
					.then((res) => {
						// this.sendDate =true;
						
						this.model.realname = res?.data?.realname
						this.model.nickName = res?.data?.nickname
						this.model.file = res?.data?.avatar
						this.model.file1 = res?.data?.avatar
						// this.$u.vuex("vuex_srls_isvip", res?.data?.isvip);
						// this.$u.vuex("vuex_user", res?.data);
						// 模拟写死
						// this.info.isvip = 1;
					});
			},
			chooseAvatar() {

				let that = this;

				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res.tempFilePaths, 4444, JSON.stringify(res.tempFilePaths));

						that.model.file = res.tempFilePaths[0]
					

						uni.uploadFile({
							url: that.vuex_config.baseUrl + '/file/formimage',
							header: {
								'content-type': 'multipart/form-data',
								'Authorization': 'Bearer ' + that.vuex_token
							},
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'file': res.tempFilePaths[0]
							},
							success: (res) => {
								
								that.model.file = JSON.parse(res
									.data)?.data?.url;
									that.model.file1 = JSON.parse(res
										.data)?.data?.url;
									console.log(that.model.file,888)
							}
						});


					}
				});

			},

			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {

						let {
							nickName,
							realname,
							// phone,
							// idcard,
							file1,
							// city,
							// area,
							// province
						} = this.model
						// if (idcard) {
						// 	if (!this.$u.test.idCard(idcard)) {
						// 		this.$u.toast('身份证号不正确');

						// 		return
						// 	}

						// }



						this.$u.api
							.updateUser({

								nickname: nickName,
								realname: realname,
								// gender: this.vuex_sex == 1 ? '男' : '女', //男1女2
								// mobile: this.vuex_phone,
								// idcard,
								// province,
								// city,
								// area,
								avatar: file1

							})
							.then((res) => {

								if (res.code === 1) {
									this.$u.toast('保存成功')
									setTimeout(()=>{
										uni.navigateBack()
									},1500)
									} else {
									this.$u.toast(res.msg);
								}

							});

						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			

			

		}
	};
</script>
<style>
	page {
		background: #f4f4f4;
	}
</style>
<style scoped lang="scss">
	/deep/ .u-form-item {
		padding-bottom: 0 !important;
	}

	.sub {
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #00C0AE;
		border-radius: 41rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #F4F4F4;
		margin: 60rpx auto;
	}

	.detail {
		margin: 14rpx 21rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		min-height: 100vh;
		position: relative;
		padding: 59rpx 26rpx 30rpx;



		.img1 {
			position: absolute;
			right: 0;
			top: 85rpx;
		}

		.photo {
			position: relative;
			width: 169rpx;
			height: 169rpx;
			overflow: hidden;
			margin: 0 auto;
			border-radius: 50%;
			box-shadow: 0 0 2px 2px #efefef;
		}

		.img {
			display: block;
			width: 169rpx;
			height: 169rpx;
			border-radius: 50%;

		}

		.wz {
			position: absolute;
			text-align: center;
			bottom: 0;
			left: 0;
			width: 169rpx;
			height: 43rpx;
			line-height: 38rpx;

			background: #000000;
			opacity: 0.76;
			font-size: 10px;
			color: #FFFFFF;
		}

	}
</style>